<template>
    <page-main>
        <el-form ref="versionForm" :model="versionForm" :rules="rules" label-width="100px">
            <el-form-item label="版本编号" prop="versionNbr">
                <el-col :span="5">
                    <el-input v-model="versionForm.versionNbr" />
                </el-col>
            </el-form-item>

            <el-form-item label="版本名称" prop="versionName">
                <el-col :span="5">
                    <el-input v-model="versionForm.versionName" />
                </el-col>
            </el-form-item>

            <el-form-item label="原价" prop="originalPrice">
                <el-col :span="5">
                    <el-input v-model="versionForm.originalPrice" />
                </el-col>
            </el-form-item>

            <el-form-item label="官方销售价" prop="salePrice">
                <el-col :span="5">
                    <el-input v-model="versionForm.salePrice" />
                </el-col>
            </el-form-item>

            <el-form-item label="渠道销售价" prop="supplyPrice">
                <el-col :span="5">
                    <el-input v-model="versionForm.supplyPrice" />
                </el-col>
            </el-form-item>

            <el-form-item label="状态" prop="state">
                <el-radio-group v-model="versionForm.state.code">
                    <el-radio label="ENABLE">启用</el-radio>
                    <el-radio label="DISABLE">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="排序" prop="sortValue">
                <el-col :span="5">
                    <el-input v-model="versionForm.sortValue" />
                </el-col>
            </el-form-item>

            <el-form-item label="版本宣传图" prop="versionLogo">
                <image-upload :url.sync="versionForm.versionLogo" action="http://scrm.1daas.com/api/upload/upload" name="image" :width="250" :height="375" :data="{'token':'TKD628431923530324'}" />
            </el-form-item>

            <el-form-item label="服务">
                <el-checkbox-group v-model="versionForm.serviceNbrs">
                    <el-checkbox v-for="(item, index) in serviceData" :key="index" :label="item.serviceNbr">{{item.serviceName}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!-- 富文本编辑器 -->
            <el-form-item label="描述" prop="describe">
                <editor v-model="versionForm.describe" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" plain size="small" @click="submitForm('versionForm')">保存</el-button>
                <el-button type="primary" plain size="small" @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>

    </page-main>
</template>

<script>

import versionApi from '@/api/init/version'
import serviceApi from '@/api/init/service'
export default {
    name: 'Version',
    components: {  },
    data() {
        return  {
            serviceData: [], // 所有服务功能数据
            versionForm: {
                versionNbr: '',
                versionName: '',
                versionLogo: '',
                originalPrice: 0.00,
                salePrice: 0.00,
                supplyPrice: 0.00,
                state: {code: 'ENABLE', desc: '启用'},
                sortValue: 0,
                describe: '',
                serviceNbrs: []
            },
            rules: {
                versionNbr: [
                    { required: true, message: '请输入版本编号', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created() {},
    mounted() {
        if (this.$route.query.type == 'edit') {
            this.getVersion()
        }
        this.getService()
    },
    methods: {
        getService() {
            serviceApi.query({}).then(res => {
                this.serviceData = res.data.data
            })
        },
        getVersion() {
            // 清空表单
            this.resetForm('versionForm')
            // 回显数据
            versionApi.get(this.$route.query.id).then(res => {
                this.versionForm = res.data.data
            })
        },
        submitForm(formName) {
            let _this = this
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 判断是添加还是修改
                    if (_this.$route.query.type == 'add') {
                        versionApi.add(this.versionForm).then(() => {
                            this.$router.push({ path: '/init/version'})
                        })
                    } else {
                        versionApi.update(this.versionForm).then(() => {
                            this.$router.push({ path: '/init/version'})
                        })
                    }
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>
